<style scoped lang="less">
    @import "JobsPage.less";
</style>

<template>
    <div class="jobs-container">
        <div class="jobs-main fl">
            <div class="filter-block">
                <ul class="type">
                    <li v-for="(item, index) in typeList" :key="index+'type'">
                        <span class="type-title">{{item.name}}:</span>
                        <span class="type-item" v-for="(i,j) in item.content" :key="j+'i'">
                            {{i}}
                        </span>
                    </li>
                    <el-button type="text" class="more">
                        更多<i class="el-icon-caret-bottom el-icon--right"></i>
                    </el-button>
                </ul>
                <div class="selected">
                    已经选择：
                    <div class="selected-list" v-for="(item, index) in typeSelected" :key="index+'sel'">
                        {{item}}
                        <i class="el-icon-close" style="color: #ccc;"></i>
                    </div>
                    <el-button type="text" class="clear-select fr">
                        清空筛选条件
                    </el-button>
                </div>
            </div>
            <div class="list-block">
                <ul class="contents">
                    <li
                            v-for="(item, index) in jobList"
                            :key="index+'s'"
                            @mouseenter="hanlderShow(index)"
                            @mouseout="hanlderHide(index)"
                    >
                        <div class="left">
                            <div class="job-name">
                                <span class="name">{{item.name}}</span>
                                <span class="salary">{{item.salary}}</span>
                            </div>
                            <div class="job-detail">
                                <span>{{item.detail.address}}</span>
                                <span>{{item.detail.experience}}</span>
                                <span>{{item.detail.Education}}</span>
                                <span>{{item.detail.num}}</span>
                            </div>
                        </div>
                        <div class="center">
                            <div class="job-company">{{item.company}}</div>
                            <div class="time">{{item.update}}</div>
                        </div>
                        <div class="right"  v-if="!downShow.includes[index]">
                            <div class="collect"><i class="el-icon-star-on btn"></i>收藏</div>
                            <div class="update-time">发布于04-23</div>
                        </div>
                        <!--v-if="downShow!==index"-->
                        <div class="right" v-else>
                            <div class="down-btn">

                            </div>
                        </div>
                    </li>
                </ul>
                <div class="paginate">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="200">
                    </el-pagination>
                </div>
                </div>
            </div>
        <div class="jobs-sidebar fr">
            <div class="recommends">
                <div class="header">
                    <img src="../../assets/images/jobsPage/head_rec.png" alt="">
                    中小学教育机构推荐
                </div>
                <ul class="content">
                    <li v-for="(item,index) in recommendList" :key="index+'rec'">
                        <div class="company-name">{{item.companyName}}</div>
                        <div class="remarks">
                            招聘
                            <span class="num">{{item.num}}</span>
                            个职位：
                            <span class="name" v-for="(nameItem, i) in item.name" :key="i+'name'">
                                {{nameItem}}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="poster-block">
                <div class="poster-item">
                    <img src="../../assets/images/jobsPage/poster_01.png" alt="">
                </div>
                <div class="poster-item">
                    <img src="../../assets/images/jobsPage/poster_02.png" alt="">
                </div>
            </div>
            <div class="out-date">
                <div class="header">
                    <img src="../../assets/images/jobsPage/head_due.png" alt="">
                    即将到期职位
                </div>
                <ul class="content">
                    <li v-for="(item,index) in recommendList" :key="index+'rec'">
                        <div class="company-name">{{item.companyName}}</div>
                        <div class="remarks">
                            招聘
                            <span class="num">{{item.num}}</span>
                            个职位：
                            <span class="name" v-for="(nameItem, i) in item.name" :key="i+'name'">
                                {{nameItem}}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "JobsPage",
        data() {
            return {
                downShow: [],
                typeList: [
                    {
                        name: '工作内容',
                        content: ['全部','北京','上海','广州','全部','北京','上海','广州','南京']
                    },  {
                        name: '职教类别',
                        content: ['全部','北京','上海','广州','全部','北京','上海','广州','南京']
                    },  {
                        name: '职教类别',
                        content: ['全部','北京','上海','广州','全部','北京','上海','广州','南京']
                    },  {
                        name: '职教类别',
                        content: ['全部','北京','上海','广州','全部','北京','上海','广州','南京']
                    },  {
                        name: '职教类别',
                        content: ['全部','北京','上海','广州','全部','北京','上海','广州','南京']
                    },
                ],
                typeSelected: ['小学', '5K-10K'],
                jobList: [
                    {
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30',
                        src: '../../../assets/images/图层01.png'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30',
                        src: '../../../assets/images/图层01.png'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30'
                    }
                ],
                recommendList: [
                    {
                        companyName: '惠州市综合高级高级高级中学',
                        num: '30',
                        name: ['高中数学','高中英语']
                    },
                    {
                        companyName: '惠州市综合高级高级高级中学',
                        num: '30',
                        name: ['高中数学','高中英语']
                    },
                    {
                        companyName: '惠州市综合高级高级高级中学',
                        num: '30',
                        name: ['高中数学','高中英语']
                    },
                    {
                        companyName: '惠州市综合高级高级高级中学',
                        num: '30',
                        name: ['高中数学','高中英语']
                    },
                    {
                        companyName: '惠州市综合高级高级高级中学',
                        num: '30',
                        name: ['高中数学','高中英语']
                    }
                ],
                dueList: [
                    {
                        companyName: '惠州市综合高级高级高级中学',
                        num: '30',
                        name: ['高中数学','高中英语']
                    },
                    {
                        companyName: '惠州市综合高级高级高级中学',
                        num: '30',
                        name: ['高中数学','高中英语']
                    },
                    {
                        companyName: '惠州市综合高级高级高级中学',
                        num: '30',
                        name: ['高中数学','高中英语']
                    },
                    {
                        companyName: '惠州市综合高级高级高级中学',
                        num: '30',
                        name: ['高中数学','高中英语']
                    },
                    {
                        companyName: '惠州市综合高级高级高级中学',
                        num: '30',
                        name: ['高中数学','高中英语']
                    }
                ],
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4
            }
        },
        methods: {
            hanlderShow(index) {
                this.downShow.push(index)
            },
            hanlderHide(index) {
                this.downShow.splice(this.downShow.indexOf(index),1)
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
    }
</script>
